<template>
  <view class="su-menu-list">
    <view class="su-menu-item" v-for="(item,index) in list" :key="index" v-if="!item.hidden" @click="menuClick(item)">
      <view class="su-menu-item-icon">
        <su-svg-icon className="su-menu-icon" iconfont :iconClass="menuIcon(item)"></su-svg-icon>
        <view class="su-msg-tag" v-if="msgNums[item.path]">
          <text v-if="msgNums[item.path] && msgNums[item.path]<=99">{{msgNums[item.path] || 0}}</text>
          <text v-else>99+</text>
        </view>
      </view>
      <view class="su-menu-item-label">
        {{menuTitle(item)}}
      </view>
    </view>
    <view class="su-menu-item" v-if="editable">
      <view class="su-menu-item-icon editable">
        <su-svg-icon className="su-menu-icon" iconfont iconClass="icon-create-new"></su-svg-icon>
      </view>
      <view class="su-menu-item-label">
        添加
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * @description 菜单组
   * @date 2022-03-27
   * @version v1.0.1
   * @author gf
   */
  export default {
    name: "su-menu-list",
    props: {
      list: {
        type: Array,
        default () {
          return []
        }
      },
      defaultProps: {
        type: Object,
        default () {
          return {
            id: 'id',
            label: 'label',
            icon: 'icon'
          }
        }
      },
      msgNums: {
        type: Object,
        default () {
          return {
            'menuId1': 2
          }
        }
      },
      editable: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      menuIcon() {
        return item => {
          let icon = item.meta ? item.meta.icon : ''
          if (icon == '#' || !icon) icon = 'gongzuotai'
          return icon
        }
      },
      menuTitle() {
        return item => {
          let title = item.meta ? item.meta.title : ''
          if (title == '#' || !title) title = ''
          return title
        }
      }
    },

    data() {
      return {}
    },
    methods:{
      menuClick(item){
        console.log('菜单',item)
        this.$u.route({
          url:item.path
        })
      }
    }
  }
</script>

<style lang="scss">
  .su-menu {
    &-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    &-item {
      padding: 20upx 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-width: 0;
      transition: all 0.3s;
      text-shadow: 0 4upx 16upx rgba($color: #000000, $alpha: 0.1);

      &:active {
        opacity: 0.6;
      }

      &:nth-child(n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #EFBD2E 0%, #F08F2E 100%);
          box-shadow: 0 8upx 16upx 0 rgba(239, 189, 46, 0.30);
        }
      }

      &:nth-child(2n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #267CFE 0%, #8175FF 100%);
          box-shadow: 0 8upx 16upx 0 rgba(115, 104, 248, 0.28);
        }
      }

      &:nth-child(3n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #0DBE7A 0%, #20CA89 100%);
          box-shadow: 0 8upx 16upx 0 rgba(40, 202, 142, 0.28);
        }
      }

      &:nth-child(4n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #267CFE 0%, #8175FF 100%);
          box-shadow: 0 8upx 16upx 0 rgba(115, 104, 248, 0.28);
        }
      }

      &:nth-child(5n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #FF6879 0%, #E82626 100%);
          box-shadow: 0 8upx 16upx 0 rgba(211, 70, 70, 0.28);
        }
      }

      &:nth-child(10n) {
        .su-menu-item-icon {
          background-image: linear-gradient(139deg, #60C6FF 0%, #2D91F7 100%);
          box-shadow: 0 8upx 16upx 0 rgba(45, 145, 247, 0.28);
        }
      }

      &-icon {
        font-size: 44upx;
        width: 88upx;
        height: 88upx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $u-primary;
        color: #fff;
        border-radius: 28upx;
        position: relative;
        &.editable{
          background-image: none !important;
          background-color: #eee !important;
          box-shadow: none !important;
          color: #aaa;
          text-shadow: none !important;
        }
        .iconfont {
          font-size: inherit;
        }
      }

      &-label {
        font-size: 24upx;
        color: #666;
        margin-top: 10upx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        display: block;
        width: calc(100% - 20upx);
      }
    }
  }

  .su-msg-tag {
    position: absolute;
    right: -12upx;
    top: -12upx;
    background-color: #F00;
    color: #fff;
    font-size: 20upx;
    border-radius: 30upx;
    line-height: 1;
    padding: 8upx 12upx;
    font-family: Arial;
    // border: solid 1upx #fff;
  }
</style>
